import React from 'react';
import { Form } from 'antd';

import Container from 'components/Container';
// import Modal from 'components/ModalComponent';
import Button from 'components/BtnComponent';
import Input from 'components/InputComponent';
import Select from 'components/Select';

import styles from './index.module.less';

const AddDialog = ({
  visible,
  basicInfo,
  setVisible,
  setBasicInfo,
}) => {
  const formRef = React.useRef({});
  React.useEffect(() => {
    if (visible && basicInfo) {
      formRef.current.setFieldsValue({ ...basicInfo });
    }
  }, [visible]);

  const onSubmit = async () => {
    const values = await formRef.current.validateFields();
    setBasicInfo(values);
    setVisible(false);
  };

  const onCancel = () => {
    setVisible(false);
  };
  return (
    <Container>
      <Form
        ref={formRef}
        style={{ borderBottom: '1px solid #2C3744', marginBottom: '16px' }}
        className={styles.form}
      >
        {/* {options.map(item => renderInput(item))} */}
        <Input
          label="剧本名称"
          name="name"
          rules={[{ required: true, message: '请填写此项信息' }]}
          required
          style={{ width: 360 }}
        />
        <Input
          label="剧本描述"
          name="description"
          style={{ width: 360 }}
        />
        <Container flex justify="row">
          <div style={{
            height: 32,
            lineHeight: '32px',
            width: 80,
            color: '#E7EFFF',
            textAlign: 'right',
          }}
          >
            标签：
          </div>
          <Select
            name="tags"
            mode="tags"
            maxTagTextLength={6}
            maxTagCount={4}
            rules={[
              () => ({
                validator(rule, value) {
                  if (value && value.some(item => item.length > 10)) {
                    // eslint-disable-next-line prefer-promise-reject-errors
                    return Promise.reject('标签应在10个字符以内');
                  }
                  if (value && value.length > 4) {
                    // eslint-disable-next-line prefer-promise-reject-errors
                    return Promise.reject('最多添加4个标签');
                  }
                  return Promise.resolve();
                },
              }),
            ]}
            className={styles.select}
            // optionData={item.options}
            getValueFromEvent={(e) => {
              setTimeout(() => {
                formRef.current.setFieldsValue({
                  tags: e,
                });
                formRef.current.validateFields(['tags']);
              }, 0);
            }}
            // onChange={item.onChange}
            style={{ height: 'auto', width: 372, marginLeft: '-12px' }}
          />
        </Container>
      </Form>
      <Container flex justify="flex-end">
        <Button type="gray" onClick={onCancel}>取消</Button>
        <Button style={{ marginLeft: '16px' }} onClick={onSubmit}>确定</Button>
      </Container>
    </Container>
  );
};

export default AddDialog;
